<template>
    <div class="index">
        <!-- 轮播图 -->
        <mt-swipe :auto="4000" class="lt-lbt">
            <mt-swipe-item>
                <a href="javascript:;"><img src="../assets/images/banner1.jpg"></a>
            </mt-swipe-item>
            <mt-swipe-item>
                <a href="javascript:;"><img src="../assets/images/banner2.jpg"></a>
            </mt-swipe-item>
            <mt-swipe-item>
                <a href="javascript:;"><img src="../assets/images/banner3.jpg"></a>
            </mt-swipe-item>
            <mt-swipe-item>
                <a href="javascript:;"><img src="../assets/images/banner4.jpg"></a>
            </mt-swipe-item>
            <mt-swipe-item>
                <a href="javascript:;"><img src="../assets/images/banner5.jpg"></a>
            </mt-swipe-item>
            <mt-swipe-item>
                <a href="javascript:;"><img src="../assets/images/banner6.jpg"></a>
            </mt-swipe-item>
        </mt-swipe>
        <!-- nav -->
        <div class="nav">
            <a href="javascript:;"><img src="../assets/images/nav1.png" alt=""></a>
            <a href="javascript:;"><img src="../assets/images/nav2.png" alt=""></a>
            <a href="javascript:;"><img src="../assets/images/nav3.png" alt=""></a>
            <a href="javascript:;"><img src="../assets/images/nav4.png" alt=""></a>
            <a href="javascript:;"><img src="../assets/images/nav5.png" alt=""></a>
            <a href="javascript:;"><img src="../assets/images/nav2.png" alt=""></a>
        </div>
        <!-- 商品列表 -->
        <div class="goodlist">
            <a href="javascript:;">
                <img src="../assets/images/product.jpg" alt="">
                <p>我可以踩在你的AJ吗我可以踩在你的AJ吗</p>
                <p>
                    <span>￥1300</span>
                    <del>￥3000</del>
                </p>
                <mt-button size="normal" class="btn" type="primary">立即购买</mt-button>
            </a>
            <a href="javascript:;">
                <img src="../assets/images/product.jpg" alt="">
                <p>我可以踩在你的AJ吗我可以踩在你的AJ吗</p>
                <p>
                    <span>￥1300</span>
                    <del>￥3000</del>
                </p>
                <mt-button size="normal" class="btn" type="primary">立即购买</mt-button>
            </a>
            <a href="javascript:;">
                <img src="../assets/images/product.jpg" alt="">
                <p>我可以踩在你的AJ吗我可以踩在你的AJ吗</p>
                <p>
                    <span>￥1300</span>
                    <del>￥3000</del>
                </p>
                <mt-button size="normal" class="btn" type="primary">立即购买</mt-button>
            </a>
            <a href="javascript:;">
                <img src="../assets/images/product.jpg" alt="">
                <p>我可以踩在你的AJ吗我可以踩在你的AJ吗</p>
                <p>
                    <span>￥1300</span>
                    <del>￥3000</del>
                </p>
                <mt-button size="normal" class="btn" type="primary">立即购买</mt-button>
            </a>
            <a href="javascript:;">
                <img src="../assets/images/product.jpg" alt="">
                <p>我可以踩在你的AJ吗我可以踩在你的AJ吗</p>
                <p>
                    <span>￥1300</span>
                    <del>￥3000</del>
                </p>
                <mt-button size="normal" class="btn" type="primary">立即购买</mt-button>
            </a>
            <a href="javascript:;">
                <img src="../assets/images/product.jpg" alt="">
                <p>我可以踩在你的AJ吗我可以踩在你的AJ吗</p>
                <p>
                    <span>￥1300</span>
                    <del>￥3000</del>
                </p>
                <mt-button size="normal" class="btn" type="primary">立即购买</mt-button>
            </a>
            <a href="javascript:;">
                <img src="../assets/images/product.jpg" alt="">
                <p>我可以踩在你的AJ吗我可以踩在你的AJ吗</p>
                <p>
                    <span>￥1300</span>
                    <del>￥3000</del>
                </p>
                <mt-button size="normal" class="btn" type="primary">立即购买</mt-button>
            </a>
            <a href="javascript:;">
                <img src="../assets/images/product.jpg" alt="">
                <p>我可以踩在你的AJ吗我可以踩在你的AJ吗</p>
                <p>
                    <span>￥1300</span>
                    <del>￥3000</del>
                </p>
                <mt-button size="normal" class="btn" type="primary">立即购买</mt-button>
            </a>
        </div>
    </div>
</template>
<script>
export default {
  mounted () {
    this.$store.state.title = '乐淘云购'
  }
}
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: auto;
  overflow: scroll;
  .lt-lbt {
    width: 100%;
    height: 200px;
    img {
      width: 100%;
      display: block;
    }
  }
  .nav {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    a {
      width: 33.33%;
      img {
        width: 100%;
        display: block;
      }
    }
  }
  .goodlist {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    a {
      width: 48%;
      box-shadow: 0 0 1px #ccc;
      margin-bottom: 10px;
      &:nth-child(even) {
        margin-left: 10px;
      }
      img {
        width: 100%;
        display: block;
      }
      p {
        padding: 5px;
        font-size: 14px;
        text-align: center;
        color: #888;
        line-height: 15px;
        span {
          color: red;
        }
      }
      .btn {
        display: block;
        margin: 0 auto;
        font-size: 14px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
